<template>
    <div class="personal-body-container">
        <a-tabs default-active-key="1" :tab-position="'left'" class="my-ant-tabs">
            
            <a-tab-pane key="1" tab="个人中心" >
                <h3>个人信息</h3>
                <div class="personInfo-container">
                    <div class="personInfo-item">
                        <div>
                            <span>昵称</span>
                            <span @click="showNickNameModal = true">修改</span>
                            <a-modal v-model="showNickNameModal" title="修改昵称" @ok="userModifyNickName">
                                <a-input placeholder="请输入新昵称" type="text" v-model="nickname" name="nickname" />
                            </a-modal>
                        </div>
                        <div>{{ $store.state.userInfo.nickname }}</div>
                    </div>
                    <div class="personInfo-item">
                        <div>
                            <span>手机号</span>
                            <span @click="showMobileModal = true">修改</span>
                            <a-modal v-model="showMobileModal" title="修改手机号" @ok="userModifyMobile">
                                <a-input placeholder="请输入新手机号" type="text" v-model="mobile" name="mobile" />
                                <div style="display: flex;margin-top:10px;">
                                    <a-input placeholder="请输入验证码" type="text" v-model="checkCode" name="checkCode" />
                                    <a-button @click="btnGetCheckCode" style="margin-left: 20px;">获取验证码</a-button>
                                </div>
                            </a-modal>
                        </div>
                        <div>{{ $store.state.userInfo.mobile }}</div>
                    </div>
                    <div class="personInfo-item">
                        <div>
                            <span>密码</span>
                            <span @click="showPasswordModal = true">修改</span>
                            <a-modal v-model="showPasswordModal" title="修改密码" @ok="userModifyPassword">
                                <a-input placeholder="请输入旧密码" type="text" v-model="password" name="password" />
                                <a-input placeholder="请输入新密码" type="text" v-model="password" name="newPassword" />
                                <a-input placeholder="请输入确认密码" type="text" v-model="password" name="confirmPassword" />
                            </a-modal>
                        </div>
                        <div>******</div>
                    </div>
                    <!-- 头像上传 -->
                    <div class="personInfo-item">
                        <div><img :src="$store.state.userInfo.avatarUrl" alt=""></div>
                        <div>
                            <a-upload name="file" :multiple="true"
                                action="https://www.mocky.io/v2/5cc8019d300000980a055e76" 
                                 >
                                <a-button> <a-icon type="upload" />修改头像</a-button>
                            </a-upload>
                        </div>
                    </div>
                </div>
            </a-tab-pane>
            <a-tab-pane key="2" tab="我的课程">
                <p>课程</p>
            </a-tab-pane>
            <a-tab-pane key="3" tab="我的订单">
                <p>订单</p>
            </a-tab-pane>
        </a-tabs>
    </div>
</template>

<script>
export default {
    name: 'PersonalBody',
    data() {
        return {
            nickname: '',
            mobile: '',
            checkCode: '',
            password: '',
            newPassword: '',
            confirmPassword: '',
            showNickNameModal: false,
            showMobileModal: false,
            showPasswordModal: false

        }
    },
    methods: {
        userModifyNickName() {
            console.log('userModifyNickName,修改昵称');
        },
        userModifyMobile() {
            console.log('userModifyMobile,修改手机号');

        },
        btnGetCheckCode() {
            console.log('btnGetCheckCode,获取验证码');
        },
        userModifyPassword() {
            console.log('userModifyPassword,修改密码');

        }
    }
}
</script>

<style lang="less" scoped>
.personal-body-container {
    width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;

    .personInfo-container {
        padding: 40px;

        .personInfo-item {
            border-bottom: 1px solid #ddd;
            margin: 0 0 20px 0;

            >div:first-of-type {
                margin-bottom: 20px;

                >span:first-of-type {
                    font-size: 20px;


                }

                >span:nth-of-type(2) {
                    margin-left: 10px;
                    color: rgb(0, 178, 120);
                }
            }

            >div:nth-of-type(2) {
                font-size: 20px;
                margin-bottom: 10px;
            }
        }
    }

}
</style>
<style>
.ant-input {
    margin-bottom: 20px !important;
}

.ant-tabs-nav .ant-tabs-tab-active {
    color: rgb(0, 178, 120) !important;

}

.ant-tabs-ink-bar {
    background-color: rgb(0, 178, 120) !important;
}

.ant-modal-footer .ant-btn-primary {
    background-color: rgb(0, 178, 120) !important;
}
.personInfo-item img{
    width: 200px;
    
}
.my-ant-tabs{
    min-height: 400px;
}
</style>
